<template>
	<div ref="dom" class="charts chart-pie"></div>
</template>

<script>
import echarts from './index'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
	name: 'ChartPie',
	props: {
		text: String,
		subtext: String
	},
	data() {
		return {
			dom: null
		}
	},
	methods: {
		resize() {
			this.dom.resize()
		},
		init(value) {
			let legend = value.map((_) => _.name)
			let option = {
				title: {
					text: this.text,
					textStyle: {
						color: '#333333',
						fontWeight: 600,
						fontSize: '16px'
					},
					left: '0'
				},
				tooltip: {
					trigger: 'item',
					orient: 'vertical',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
				legend: {
					right: '0',
					orient: 'vertical',
					bottom: '20%',
					data: legend
				},
				series: [
					{
						name: this.text,
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 20,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: value
					}
				]
			}
			this.dom = echarts.init(this.$refs.dom, 'tdTheme')
			this.dom.setOption(option)
			on(window, 'resize', this.resize)
		}
	},
	beforeDestroy() {
		off(window, 'resize', this.resize)
	}
}
</script>
